<template>
  <div class="app-container">
    <el-form label-width="100"  ref="form" :model="form" :rules="rules">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="扣款原因" required prop="deductionsFor">
            <el-input v-model="form.deductionsFor" style="width:220px" placeholder="扣款原因"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扣款金额" required prop="deductionsAmount">
            <el-input v-model="form.deductionsAmount" style="width:220px" placeholder="扣款金额"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车损照片">
            <ImageUpload isArray v-model="form.cheSunImage" :limit="3"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="维修单据">
            <ImageUpload isArray v-model="form.maintainImage" :limit="3"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import * as api from '@/api/order/settlement';

export default {
  dicts: ['settlement_type', 'settlement_deductionsWay'],
  props: ['id', 'type'],
  data() {
    return {
      form: {
        // type: 1, // 结算类型(1押金结算 2违章结算)
        deductionsWay: 1, // 扣款方式(1押金抵扣 2线下补缴)
        deductionsFor: '', // 扣款原因
        deductionsAmount: '', // 扣款金额
        cheSunImage: [], // 车损照片
        maintainImage: [], // 维修单据
      },

      rules: {

        deductionsFor: [{
          required: true,
          message: '扣款原因不能为空',
          trigger: 'blur'
        }],
        deductionsAmount: [{
          required: true,
          message: '扣款金额不能为空',
          trigger: 'blur'
        }, {
          pattern: /^[0-9]+(.[0-9]{1,2})?$/,
          message: '扣款金额为正数，最多保留两位小数',
          trigger: 'blur',
        }],
      }
    };
  },
  computed: {
    formData() {
      const formData = {
        id: this.id,
        type: this.type, // 结算类型(1押金结算 2违章结算)
        deductionsWay: this.form.deductionsWay, // 扣款方式(1押金抵扣 2线下补缴)
        deductionsFor: this.form.deductionsFor, // 扣款原因
        deductionsAmount: this.form.deductionsAmount, // 扣款金额
        cheSunImage: this.form.cheSunImage, // 车损照片
        maintainImage: this.form.maintainImage, // 维修单据
      };
      return formData;
    },
  },
  mounted() {
    if (this.id) {
      this.getData();
    }
  },
  methods: {
    emitData() {
      return this.formData;
    },
    validForm() {
      let _valid=false
      this.$refs["form"].validate(valid => {
        _valid=valid;
      });
      return _valid;
    },
    getData() {
      api.getSettlement(this.id).then(response => {
        this.id = response.data.id;
        this.type = response.data.type; // 结算类型(1押金结算 2违章结算)
        this.form.deductionsWay = response.data.deductionsWay; // 扣款方式(1押金抵扣 2线下补缴)
        this.form.deductionsFor = response.data.deductionsFor; //' 扣款原因
        this.form.deductionsAmount = response.data.deductionsAmount; //' 扣款金额
        this.form.cheSunImage = response.data.cheSunImage; // 车损照片
        this.form.maintainImage = response.data.maintainImage; // 维修单据
      });
    },
    submitData() {
      this.$refs["form"].validate(valid => {

        if (valid) {
          api.addSettlement(this.formData).then(response => {
            this.$message.success(response.msg);
          });
        }
      });
    },
  },
}
</script>
